iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
Mobile Development

從零開始學React Native系列 第 18

【從零開始學React Native】17. 創建Todo Tracker——建構並架設parse server

  • 分享至 

  • xImage
  •  

我們今天使用docker來創建本地的parse server。

創建環境

步驟1:創建項目結構

首先,讓我們在根目錄創建一個名為server的文件夾,用於存放所有相關文件

步驟2:配置Docker Compose

server文件夾中創建docker-compose.yml文件:

# server\docker-compose.yml
version: '3.7'

services:
  postgres:
    image: postgres:latest
    env_file: .env
    ports:
      - "${POSTGRES_PORT}:5432"
    volumes:
      - ./data/postgres:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER}"]
      interval: 10s
      timeout: 5s
      retries: 5

  parse-server:
    image: parseplatform/parse-server
    env_file: .env
    ports:
      - "${PARSE_SERVER_PORT}:1337"
    environment:
      PARSE_SERVER_APPLICATION_ID: ${APP_ID}
      PARSE_SERVER_MASTER_KEY: ${MASTER_KEY}
      PARSE_SERVER_DATABASE_URI: postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB}
      PARSE_SERVER_CLOUD: /parse-server/cloud/main.js
      PARSE_SERVER_FILE_KEY: ${FILE_KEY}
      PARSE_SERVER_MOUNT_PATH: ${PARSE_MOUNT}
      PARSE_SERVER_URL: ${PARSE_SERVER_URL}
      PARSE_PUBLIC_SERVER_URL: ${PARSE_PUBLIC_SERVER_URL}
      PARSE_SERVER_ALLOW_CLIENT_CLASS_CREATION: ${PARSE_SERVER_ALLOW_CLIENT_CLASS_CREATION}
      PARSE_SERVER_MASTER_KEY_IPS: ${PARSE_SERVER_MASTER_KEY_IPS}
    volumes:
      - ./cloud:/parse-server/cloud
      - ./data/parse-server:/parse-server/data
    depends_on:
      postgres:
        condition: service_healthy

  parse-dashboard:
    image: parseplatform/parse-dashboard
    env_file: .env
    ports:
      - "${PARSE_DASHBOARD_PORT}:4040"
    environment:
      PARSE_DASHBOARD_ALLOW_INSECURE_HTTP: 1
      PARSE_DASHBOARD_SERVER_URL: ${PARSE_PUBLIC_SERVER_URL}
      PARSE_DASHBOARD_MASTER_KEY: ${MASTER_KEY}
      PARSE_DASHBOARD_APP_ID: ${APP_ID}
      PARSE_DASHBOARD_APP_NAME: ${APP_NAME}
      PARSE_DASHBOARD_USER_ID: ${DASHBOARD_USER_ID}
      PARSE_DASHBOARD_USER_PASSWORD: ${DASHBOARD_USER_PASSWORD}
      PARSE_DASHBOARD_CONFIG: |
        {
          "apps": [
            {
              "serverURL": "${PARSE_PUBLIC_SERVER_URL}",
              "appId": "${APP_ID}",
              "masterKey": "${MASTER_KEY}",
              "appName": "${APP_NAME}"
            }
          ],
          "users": [
            {
              "user": "${DASHBOARD_USER_ID}",
              "pass": "${DASHBOARD_USER_PASSWORD}"
            }
          ]
        }
    depends_on:
      - parse-server

這個配置文件定義了三個服務:

  1. postgres:PostgreSQL數據庫服務
  2. parse-server:Parse Server主服務
  3. parse-dashboard:Parse Dashboard,用於可視化管理Parse Server

步驟3:設置環境變量

創建一個.env文件來存儲環境變量:

// server\.env

# Parse Server Configuration
APP_ID=myAppId
MASTER_KEY=myMasterKey
FILE_KEY=myFileKey
PARSE_MOUNT=/parse
APP_NAME=MyParseApp

# Database Configuration
POSTGRES_USER=postgres
POSTGRES_PASSWORD=password
POSTGRES_DB=parse
POSTGRES_PORT=5432

# Server Ports
PARSE_SERVER_PORT=1337
PARSE_DASHBOARD_PORT=4040

# Dashboard Configuration
DASHBOARD_USER_ID=admin
DASHBOARD_USER_PASSWORD=password

# Additional Parse Server Configuration
PARSE_SERVER_URL=http://parse-server:1337${PARSE_MOUNT}
PARSE_PUBLIC_SERVER_URL=http://localhost:1337${PARSE_MOUNT}
PARSE_SERVER_ALLOW_CLIENT_CLASS_CREATION=true
PARSE_SERVER_MASTER_KEY_IPS=0.0.0.0/0,::/0

步驟4:創建Cloud Code文件

創建cloud文件夾和main.js文件:

// server\cloud\main.js
Parse.Cloud.define("hello", function(request) {
    return "Hello from Parse Cloud Code!";
});

啟動環境

現在我們已經準備好所有必要的配置,讓我們啟動Parse Server環境。

  1. 進入server目錄:cd server
  2. 啟動Docker服務:docker-compose up -d
  3. 檢查運行中的容器:docker ps

https://ithelp.ithome.com.tw/upload/images/20241002/20108931dPzAVFZBoA.png

使用Parse Dashboard

現在Parse Server已經運行,我們可以使用Parse Dashboard來管理我們的應用。

  • 在瀏覽器中訪問 http://localhost:4040
  • 使用我們在.env文件中設置的憑證登錄:
    • 用戶名:DASHBOARD_USER_ID(在我們的例子中是 "admin")
    • 密碼:DASHBOARD_USER_PASSWORD(在我們的例子中是 "password")
  • 登錄後,你應該能看到 "MyParseApp" 應用。點擊進入查看詳情。

https://ithelp.ithome.com.tw/upload/images/20241002/20108931spsqvVkxxM.png

https://ithelp.ithome.com.tw/upload/images/20241002/20108931dVrnx3xuVE.png

這樣,我們的parse server就架設成功了。

測試Cloud Function

為了確保一切正常工作,讓我們測試一下我們之前創建的Cloud Function。

  1. 在Parse Dashboard中,點擊 "API Console"。
  2. 在Console中輸入以下代碼:
Parse.Cloud.run("hello").then(function(result) {
  console.log(result);
}, function(error) {
  console.error(error);
});
  1. 點擊 "Run" 按鈕。你應該在控制台輸出中看到 "Hello from Parse Cloud Code!"。

https://ithelp.ithome.com.tw/upload/images/20241002/20108931qLR9mYNGq1.png

心得

今天我們成功地在本地環境中搭建了一個完整的Parse Server開發環境。在接下來的開發中,我們可以專注於app的實現,並進行開發。


上一篇
【從零開始學React Native】16. 什麼是BAAS
下一篇
【從零開始學React Native】18. 創建Todo Tracker——app設置並連接到parse server (上)
系列文
從零開始學React Native20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言